<template>
  <div class="middle">
    <el-card>
      <div class="header">
        <div class="menu">
          <el-menu
            :default-active="activeIndex"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="1">销售量</el-menu-item>
            <el-menu-item index="2">访问量</el-menu-item>
          </el-menu>
        </div>
        <div class="radio">
          <el-radio-group v-model="radio1">
            <el-radio-button label="今日"></el-radio-button>
            <el-radio-button label="本周"></el-radio-button>
            <el-radio-button label="本月"></el-radio-button>
            <el-radio-button label="今年"></el-radio-button>
          </el-radio-group>
        </div>
        <div class="dateTime">
          <el-date-picker
            v-model="dates"
            type="daterange"
            align="right"
            value-format="yyyy-MM-dd"
            unlink-panels
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="line"></div>
      <div class="main">
        <el-row :gutter="10">
          <el-col class="left" :span="18">
            <LeftView :activeIndex="activeIndex"></LeftView>
          </el-col>
          <el-col :span="6">
            <RightView :activeIndex="activeIndex"></RightView>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import LeftView from "./components/LeftView";
import RightView from "./components/RightView";

export default {
  name: "MiddleView",
  components: {
    LeftView,
    RightView
  },
  data() {
    return {
      activeIndex: "1",
      radio1: "本周",
      pickerOptions: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            }
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      dates: []
    };
  },
  methods: {
    handleSelect(value) {
      this.activeIndex = value;
    }
  }
};
</script>

<style lang="scss" scoped>
.middle {
  margin-top: 20px;
  ::v-deep .el-card__body {
    padding: 10px;
  }
  .header {
    display: flex;
    align-items: center;
    .menu {
      flex: 1;
      .el-menu.el-menu--horizontal {
        border: none;
      }
    }
    .radio {
      margin-right: 20px;
    }
  }
  .line {
    height: 1px;
    background-color: #aaa;
  }
  .main {
    height: 350px;
  }
}
</style>
